<template>
    <view>
		<u-toast ref="uToast" />
		<view>
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			    <image class="avatar" :src="avatarUrl"></image>
			</button>
		</view>
		<view class="row">
			<view class="text1">
				昵称
			</view>
			<input  type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickName" @blur="onNickName" />
			
		</view>
		<button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;width: 400rpx;" form-type="submit" @click="completeMemberInfo()">提交</button>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                avatarUrl: uni.getStorageSync('headUrl'),
                nickName: uni.getStorageSync('userName')
            }
        },
		
        methods: {
            onChooseAvatar(e) {
                this.uploadFilePromise(e.detail.avatarUrl)
            },
            onNickName(e) {
                // this.completeMemberInfo(e.detail.value)
				this.nickName = e.detail.value
            },
            uploadFilePromise(avatarUrl) { 
				const _this = this
            //调后台接口上传图片  这里的avatarUrl拿到的是微信地址 
				uni.uploadFile({
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL + "/updateInfo",
					filePath: avatarUrl,
					name: 'filePath',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					formData: {
						"userId": uni.getStorageSync('userId'),
					},
					success: (res) => {
						const url = JSON.parse(res.data).data.headUrl
						_this.avatarUrl = url
						uni.setStorageSync("headUrl", url)
					}
				})
            },
            //接收 avatarUrl / nickName 
            completeMemberInfo() {
                //接收 avatarUrl / nickName 调接口完善头像或者昵称信息
				let params = {
					"userId": uni.getStorageSync('userId'),
					"userName": this.nickName
				}
				
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token')
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/updateName",
					method: 'POST',
					data: params,
					success(res) {
						if (res.data.code == 200) {
							_this.userName = res.data.data
							uni.setStorageSync("userName", res.data.data)
							_this.$refs.uToast.show({
								type: 'success',
								title: '修改成功',
								message: "修改成功",
								duration: 700,
							})
						}else{
							_this.$refs.uToast.show({
								type: 'error',
								title: '修改失败',
								message: '修改失败',
								duration: 1000,
							})
						}
					}
				})
            },
 
        }
    }
</script>
 
<style>
 .avatar-wrapper {
   padding: 0;
   width: 56px !important;
   border-radius: 8px;
   margin-top: 40px;
   margin-bottom: 40px;
   background-color: #fff;
 }
 
 .avatar {
   display: block;
   width: 56px;
   height: 56px;
 }

.container {
  display: flex;
}
.row{
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   display: flex;
   align-items: center;
   height: 80rpx;
   padding-left: 20rpx;
}
.text1{
    flex: 2;
}
.weui-input{
    flex: 6;
}

</style>